<template>
	<view class="maindiv">
		<view class="wrap">
			<u-swiper :list="list" :effect3d="true" :title="true"></u-swiper>
		</view>
		<view class="">
			<u-dropdown ref="uDropdown" style="z-index: 10;">
				<!-- <u-dropdown-item v-model="value1" title="公司" :options="options1"></u-dropdown-item> -->
				<u-dropdown-item v-model="zhinengval" title="岗位类别" :options="zhinengopt"></u-dropdown-item>
				<u-dropdown-item v-model="chengshival" title="城市" :options="chengshiopt"></u-dropdown-item>
				<u-dropdown-item v-model="zhuanyeval" title="专业" :options="zhuanyeopt"></u-dropdown-item>
				<u-dropdown-item title="搜索">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<u-field label="关键字" placeholder="请输入搜索条件" v-model="condition">
						</u-field>
						<view class="" style="padding: 10px 20px;">
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<div></div>
		<view class="" style="">
			<u-card :title="item.title" :sub-title="item.subtitle" v-for="item in contentlist">
				<view class="" slot="body">
					<u-read-more :show-height="250" :toggle="true" close-text=" " open-text=" ">
						<rich-text :nodes="item.content">
						</rich-text>
						<!-- <div :innerHTML="item.content"></div> -->
					</u-read-more>
				</view>
				<view class="" slot="foot">
					<view class="" style="display: flex;justify-content: space-between;width: 30vw;">
						<u-icon name="edit-pen" size="20" color="" label="申请" @click="applyclick()"></u-icon>
						<u-icon name="thumb-up" size="20" color="" label="推荐" @click="tuijianclick()"></u-icon>
					</view>
				</view>
			</u-card>
		</view>
		<u-modal v-model="show" :title-style="{color: ''}" @confirm="confirm()" :async-close="true" ref="uModal"
		 :mask-close-able="true">
			<view class="slot-content">
				<view>
					<u-field v-model="name" label="姓名" placeholder="请填写姓名">
					</u-field>
					<u-field v-model="telephone" label="手机号" placeholder="请填写手机号">
					</u-field>
					<u-field v-model="yixiang" label="意向岗位" placeholder="请选择意向岗位" @click="showpick = true" :disabled="true">
					</u-field>
					<view class="" style="display: flex;justify-content: center;">
						<u-tag text="注:请将完整简历发送至邮箱:hr@engipower.com" mode="light" />
					</view>
				</view>
			</view>
		</u-modal>
		<view>
			<u-toast ref="uToast" />
		</view>
		<u-picker v-model="showpick" mode="selector" :range="nameopt" @confirm="showpickok()"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				yixiang: '',
				nameopt: [],
				showpick: false,
				name: '',
				telephone: '',
				show: false,
				contentlist: [],
				condition: '',


				title: 'Hello',
				list: [{
						image: 'https://www.zhaopin.engipower.com/1.jpg',
						title: '英集动力招聘开始了'
					},
				],
				zhinengval: '',
				chengshival: '',
				zhuanyeval: '',
				zhinengopt: [{
						"label": "全部",
						"value": ""
					},
					{
						"label": "热能研究类",
						"value": "热能研究类"
					}, {
						"label": "研发类",
						"value": "研发类"
					}, {
						"label": "算法类",
						"value": "算法类"
					}, {
						"label": "测试类",
						"value": "测试类"
					}, {
						"label": "大数据类",
						"value": "大数据类"
					}, {
						"label": "产品类",
						"value": "产品类"
					}, {
						"label": "设计类",
						"value": "设计类"
					}, {
						"label": "项目支持类",
						"value": "项目支持类"
					}, {
						"label": "市场营销类",
						"value": "市场营销类"
					}, {
						"label": "职能类",
						"value": "职能类"
					}, {
						"label": "管培生",
						"value": "管培生"
					}
				],
				chengshiopt: [{
						label: '全部',
						value: '',
					},
					{
						label: '郑州',
						value: '郑州',
					},
					{
						label: '常州',
						value: '常州',
					}, {
						label: '杭州',
						value: '杭州',
					}, {
						label: '西安',
						value: '西安',
					}
				],
				zhuanyeopt: [{
						"label": "全部",
						"value": ""
					},

					{
						"label": "热能工程",
						"value": "热能工程"
					}, {
						"label": "工程热物理",
						"value": "工程热物理"
					}, {
						"label": "暖通空调",
						"value": "暖通空调"
					}, {
						"label": "流体机械及工程",
						"value": "流体机械及工程"
					}, {
						"label": "制冷及低温工程",
						"value": "制冷及低温工程"
					}, {
						"label": "化工过程机械",
						"value": "化工过程机械"
					}, {
						"label": "流体力学",
						"value": "流体力学"
					}, {
						"label": "电气系统及其自动化",
						"value": "电气系统及其自动化"
					}, {
						"label": "计算机",
						"value": "计算机"
					}, {
						"label": "软件工程",
						"value": "软件工程"
					}, {
						"label": "工业工程",
						"value": "工业工程"
					}, {
						"label": "数学及相关专业",
						"value": "数学及相关专业"
					}, {
						"label": "软件或热能工程",
						"value": "软件或热能工程"
					}, {
						"label": "化工过程",
						"value": "化工过程"
					}, {
						"label": "系统工程",
						"value": "系统工程"
					}, {
						"label": "过程装备控制",
						"value": "过程装备控制"
					}, {
						"label": "工业设计",
						"value": "工业设计"
					}, {
						"label": "平面设计",
						"value": "平面设计"
					}, {
						"label": "能源工程",
						"value": "能源工程"
					}, {
						"label": "自动化控制",
						"value": "自动化控制"
					}, {
						"label": "市场营销等",
						"value": "市场营销等"
					}, {
						"label": "人力资源",
						"value": "人力资源"
					}, {
						"label": "工商管理",
						"value": "工商管理"
					}, {
						"label": "财务管理",
						"value": "财务管理"
					}, {
						"label": "市场营销",
						"value": "市场营销"
					}, {
						"label": "自动化",
						"value": "自动化"
					}, {
						"label": "控制工程",
						"value": "控制工程"
					}, {
						"label": "数学",
						"value": "数学"
					}, {
						"label": "企业管理",
						"value": "企业管理"
					}
				],
				// url: 'http://124.70.158.145:7777',
				url: 'https://www.zhaopin.engipower.com',
			}
		},
		onLoad() {
			let params = {
				current: 1,
				size: 1000,
				type: '',
				name: '',
				xueli: '',
				miaoshu: '',
				yaoqiu: '',
				position: '',
				zhuanye: ''
			}

			this.$u.get(`${this.url}/job/list`, params).then(res => {
				this.getopt(res)
			})
			this.loadData()
		},

		watch: {
			zhinengval: {
				handler: function() {
					this.loadData()
				}
			},
			chengshival: {
				handler: function() {
					this.loadData()
				}
			},
			zhuanyeval: {
				handler: function() {

					this.loadData()
				}
			}
		},

		methods: {

			showpickok(val) {
				this.yixiang = this.nameopt[val]
			},

			getopt(res) {
				let opt_position = []
				let opt_name = []
				let opt_type = []
				let opt_zhuanye = []

				res.data.records.map(item => {
					opt_position = opt_position.concat(item['position'].split(','))
					opt_name = opt_name.concat(item['name'])
					opt_type = opt_type.concat(item['type'])
					opt_zhuanye = opt_zhuanye.concat(item['zhuanye'].split("、"))
				})

				opt_position = opt_position.filter(item => {
					return item != ''
				})

				opt_name = opt_name.filter(item => {
					return item != ''
				})

				opt_type = opt_type.filter(item => {
					return item != ''
				})

				opt_zhuanye = opt_zhuanye.filter(item => {
					return item != ''
				})


				let p = new Set(opt_position)
				let n = new Set(opt_name)
				let t = new Set(opt_type)
				let z = new Set(opt_zhuanye)

				opt_position = Array.from(p)
				opt_name = Array.from(n)
				opt_type = Array.from(t)
				opt_zhuanye = Array.from(z)



				let selopt_position = [{
					label: '全部',
					value: '',
				}]
				opt_position.map(item => {
					if (item != '') {
						let each_item = {
							label: item,
							value: item,
						}
						selopt_position.push(each_item)
					}
				})


				let selopt_name = []
				opt_name.map(item => {
					if (item != '') {
						selopt_name.push(item)
					}
				})

				let selopt_type = [{
					label: '全部',
					value: '',
				}]
				opt_type.map(item => {
					if (item != '') {
						let each_item = {
							label: item,
							value: item,
						}
						selopt_type.push(each_item)
					}
				})

				let selopt_zhuanye = [{
					label: '全部',
					value: '',
				}]
				opt_zhuanye.map(item => {
					if (item != '') {
						let each_item = {
							label: item,
							value: item,
						}
						selopt_zhuanye.push(each_item)
					}
				})

				this.chengshiopt = selopt_position
				this.nameopt = selopt_name
				this.zhinengopt = selopt_type
				this.zhuanyeopt = selopt_zhuanye


			},

			loadData() {
				// let url =

				let params = {
					current: 1,
					size: 1000,
					type: this.zhinengval,
					name: '',
					xueli: '',
					miaoshu: this.condition,
					yaoqiu: '',
					position: this.chengshival,
					zhuanye: this.zhuanyeval
				}

				this.$u.get(`${this.url}/job/list`, params).then(
					// this.$u.get('http://124.70.158.145:7777/job/list', params).then(
					res => {

						this.contentlist = []
						// this.$refs.uToast.show({
						// 	title: JSON.stringify(res),
						// 	type: 'error',
						// })
						res.data.records.map(item => {
							let each_record = {
								title: item['name'],
								subtitle: item['xueli'],
								content: `城市：${item['position'].split(',').filter(item => {return item != ''}).join(",")}<br/>专业：${item['zhuanye']}<br/>描述: <br/>${item['miaoshu'].replace("'",'').replace("'", '')}<br/>要求：<br/>${item["yaoqiu"].replace("'",'').replace("'", '')}`
							}
							this.contentlist.push(each_record)
						})
					});




			},

			confirm() {
				if (!this.$u.test.mobile(this.telephone) || this.name == '') {
					this.$refs.uToast.show({
						title: '数据格式错误',
						type: 'error',
					})
					this.$refs.uModal.clearLoading();
					return
				}
				let params = {
					name: this.name,
					telephone: this.telephone,
					yixiang: this.yixiang
				}
				this.$u.post(`${this.url}/users/add`, params).then(res => {
					this.show = false
				})
			},
			closeDropdown() {
				this.loadData()
				this.$refs.uDropdown.close()
			},

			applyclick() {
				this.name = ''
				this.telephone = ''
				this.show = true

			},

			tuijianclick() {
				this.name = ''
				this.telephone = ''
				// console.log(this.$u.test.mobile('13845678900'));
				this.show = true
			}

		}
	}
</script>

<style lang="scss" scoped>
	.maindiv {
		// background-color: black;
	}
</style>
